<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验2_12</title>
    <style>
        .rabbit-animation {
            width: 200px; 
            height: 300px;
            overflow: hidden; 
        }

        @keyframes rabbit-move {
            0% { background-image: url('1.jpg'); } 
            12.5% { background-image: url('2.jpg'); } 
            25% { background-image: url('3.jpg'); } 
            37.5% { background-image: url('4.jpg'); } 
            50% { background-image: url('5.jpg'); } 
            62.5% { background-image: url('6.jpg'); } 
            75% { background-image: url('7.jpg'); } 
            87.5% { background-image: url('8.jpg'); } 
            100% { background-image: url('9.jpg'); } 
        }
		
        .rabbit {
            width: 100%;
            height: 100%;
            background-size: contain; 
            background-repeat: no-repeat;
            animation: rabbit-move 1.5s infinite; 
        }
    </style>
</head>
<body>
    <div class="rabbit-animation">
        <div class="rabbit"></div>
    </div>
</body>
</html>